<template>
	<div class="u-page u-page-color-other">
		
		<u-navbar :title="title" :background="background" :border-bottom="false" :custom-back="comeback"></u-navbar>
		<!-- <div v-if="NoticesManage_SceneID">
			<u-swiper :list="posters" height="280" name="PosterImage"></u-swiper>
		</div> -->
		
		<!-- 公告栏 -->
		<div v-if="notices && notices.length>0">
			<div class="news-content">
				<div class="u-flex u-row-between u-pl-15 u-pr-15 u-pt-15 u-title">
					<div class="u-flex">
						<div class="u-fz-16">公告栏</div>
						<div class="u-pl-5 color-blue">TOP</div>
					</div>
					<div class="u-flex" @click="$u.route('/pages_private_scene1/NewSeaSpace/NoticeList')">
						<div>更多</div>
						<div class="u-pl-5"><u-icon name="arrow-right" size="30"></u-icon></div>
					</div>
				</div>
				<ul class="news-content-lists clearfix">
					<li class="clearfix" v-for="(item,index) in notices">
						<a href="#">
							<i class="u-font-bold" style="color: #DDAA00;">{{index+1}}</i>
							<span>{{item.title}}</span>
						</a>
					</li>
				</ul>
			</div>
		</div>
		
		<!-- 机会、商品、拍档 -->
		<div class="u-pt-10">
			<u-tabs :list="TabsArr" :is-scroll="false" :current="current" @change="change" active-color="black" bg-color="#00000000"></u-tabs>
			<div v-if="current==0">
				<div class="u-pl-10 u-pr-10" v-if="MarketingList && MarketingList.length>0">
					<!-- 需求列表 -->
					<ul>
						<li :class="index==0?'work-task-li':'u-border-top work-task-li'" @click="routePage(item)"
							v-for="(item, index) in MarketingList" :key="index">
							<!-- 标题 -->
							<div class="u-title u-flex u-row-between u-col-center u-mb-5">
								<div class="u-flex u-col-center u-flex-1">
									<div>
										<u-tag :text="item.taskLabel" mode="dark" size="mini"
											:bg-color="item.taskColor"></u-tag>
									</div>
									<div class="job-name">
										{{item.taskName}}
									</div>
								</div>
								<div class="job-price" v-if="item.taskPrice">￥{{item.taskPrice}}</div>
							</div>
							<!-- 标签 -->
							<div class="u-scroll-x u-mr-5" style="display: flex;justify-content: flex-start;"
								v-if="item.taskKeyword">
								<u-tag v-for="(titem, tindex) in item.taskKeyword.split(',')" :key="tindex"
									:text="titem" type="info" mode="dark" size="mini" bg-color="#f7f5f8"></u-tag>
							</div>
							<!-- 内容 -->
							<div class="u-line-1 u-cl-content u-mb-5">
								{{item.taskDetail}}
							</div>
							<!-- 时间 -->
							<div class="u-cl-content u-fz-12">发布时间：{{item.createTime}}</div>
						</li>
					</ul>
				</div>
				<div class="u-border-top" v-else>
					<div class="u-text-center" style="padding-top: 20%;">
						<u-empty text="暂无测评" mode="data"></u-empty>
					</div>
				</div>
			</div>
			<div v-if="current==1">
				<div v-if="OServicesList && OServicesList.length>0">
					<!-- 需求列表 -->
					<ul>
						<li class="services-li" style="" @click="toJobDetails(item)"
							v-for="(item, index) in OServicesList" :key="index">
							<!-- 标题 -->
							<div class="u-title u-flex u-row-between u-col-center">
								<div class="u-flex u-col-center u-flex-1">
									<div class="hot-tag" v-if="item.jobTop">热</div>
									<div class="new-tag" v-if="!item.jobTop && isNewOS(item)">新</div>
									<div class="os-job-name">
										{{item.jobName?item.jobName:''}}
									</div>
								</div>
								<div class="os-salary" v-if="item.salary">￥{{item.salary}}</div>
							</div>
							<div class="u-pt-5">
								{{item.company?item.company:''}}
							</div>
							<!-- 标签 -->
							<div class="u-scroll-x u-mr-5 u-pt-5" style="display: flex;justify-content: flex-start;">
								<u-tag :text="item.experiece" type="info" mode="dark" size="mini" bg-color="#f7f5f8"
									v-if="item.experiece"></u-tag>
								<u-tag :text="item.degree" type="info" mode="dark" size="mini" bg-color="#f7f5f8"
									v-if="item.degree"></u-tag>
								<u-tag :text="item.type + item.requirements" type="info" mode="dark" size="mini"
									bg-color="#f7f5f8" v-if="item.type && item.requirements"></u-tag>
								<u-tag :text="item.keyword.split(',')[0]" type="info" mode="dark" size="mini"
									bg-color="#f7f5f8" v-if="item.keyword"></u-tag>
								<u-tag :text="item.keyword.split(',')[1]" type="info" mode="dark" size="mini"
									bg-color="#f7f5f8" v-if="item.keyword && item.keyword.split(',').length>1"></u-tag>
							</div>
							<div class="u-pt-10" style="display: flex;justify-content: space-between;">
								<div class="u-flex">
									<u-avatar :src="item.avatar=='男'?BoyAvatar:GirlAvatar" size="45"></u-avatar>
									<div class="u-pl-5">{{item.leader?item.leader:''}}</div>
									<div class="u-pl-5">{{item.posts?item.posts:''}}</div>
								</div>
								<div class="u-cl-content u-fz-12">
									{{item.area?item.area:''}}
								</div>
							</div>
						</li>
					</ul>
				</div>
				<div class="u-border-top" v-else>
					<div class="u-text-center" style="padding-top: 20%;">
						<u-empty text="暂无服务" mode="data"></u-empty>
					</div>
				</div>
			</div>
			
		</div>
		
		<!-- 为了列表能显示完全 -->
		<div style="height: 120rpx;"></div>
		
		<div style="position: fixed;bottom: 0rpx;background-color: #fffbfe;width: 100%;z-index: 3;">
			<div class="u-pt-20 u-pb-30" style="width: 90%;margin: 0 auto;height: 100px;">
				<u-button type="success" :custom-style="customStyle" @click="toInvitation">
					去邀请好友
				</u-button>
			</div>
		</div>
		
		<!-- 输入验证码 -->
		<u-modal v-model="verificationCode_show" confirm-text="取消" title="邀请码" width="700" @confirm="toIndex">
			<view class="slot-content">
				<u-message-input mode="bottomLine" :maxlength="maxlength" @finish="finish"></u-message-input>
			</view>
		</u-modal>
			
	</div>
</template>

<script>
	import globalData from "@/globalData";
    export default {
	  
      data() {
        return {
			title: '首页',
			background: {
				backgroundColor: '#f3e4e9',
			},
			posters: [],
			notices: [],
			TabsArr: [
					{
						name: '测评',
					},
					{
						name: '招聘'
					}
			],
			current: 0,
			pageNum0: 1,
			pageSize0: 10,
			MarketingList: [],
			pageNum1: 1,
			pageSize1: 10,
			OServicesList: [],
			BoyAvatar: globalData.IMGS.BoyAvatar,
			GirlAvatar: globalData.IMGS.GirlAvatar,
			customStyle: {
				background: '#FE8101 !important'
			},
			verificationCode_show: false,//验证码弹窗
			maxlength: 6,
			errorCodeTimes: 0
		};
      },
      
      onLoad(options) {
		this.checkUser()
	  },
	  
	  onShow() {
	  	
	  },
    
      mounted() {
      },
    
      onReady() {
         
      },
	  
	  onReachBottom() {
	  	  if(this.current == 0){
			  this.pageNum0 += 1
			  this.getMarketingList()
		  }else if(this.current == 1){
			  this.pageNum1 += 1
			  this.getOServicesList()
		  }
	  },
    
      methods: {
		  change(index) {
		  	this.current = index;
		  },
		  
		  /**
		   * 获取轮播图数据
		   */
		  async getPosters(){
			  let result = await this.$u.api.unifyRequest({
				  appid: 'SceneModule',
				  wf_num: 'R_SceneModule_BL002',
				  SceneID: this.NoticesManage_SceneID,
				  SceneAssetsId: this.SceneAssetsId,
				  loading: false // 默认发起请求会有一个全局的Loading，设置false可去掉
			  });
			  if(result.code == 200){
				  this.posters = result.data
			  }
		  },
		  
		  /**
		   * 获取公告管理数据
		   */
		  async getNotices(){
			  let result = await this.$u.api.unifyMiniRest({
			  	systemid: "meily",
			  	url: "/space/notice/list",
			  	loading: true // 默认发起请求会有一个全局的Loading，设置false可去掉
			  });
			  if(result.code == 200){
				  this.notices = result.rows
			  }
		  },
		  
		  /**
		   * 获取测评列表数据
		   */
		  async getMarketingList() {
		  	let result = await this.$u.api.unifyMiniRest({
		  		systemid: "meily",
		  		url: "/hall/list",
		  		collectType: 'market',
		  		pageNum: this.pageNum0,
		  		pageSize: this.pageSize0,
		  		loading: true // 默认发起请求会有一个全局的Loading，设置false可去掉
		  	});
		  	if (result.code == 200) {
		  		if (this.pageNum0 != 1) {
		  			this.MarketingList = this.MarketingList.concat(result.rows)
		  		} else {
		  			this.MarketingList = result.rows
		  		}
		  	}
		  },
		  
		  /**
		   * 获取招聘列表数据
		   */
		  async getOServicesList() {
		  	let result = await this.$u.api.unifyMiniRest({
		  		systemid: "meily",
		  		url: "/job/list",
		  		status: "招聘中",
		  		pageNum: this.pageNum1,
		  		pageSize: this.pageSize1,
		  		loading: true // 默认发起请求会有一个全局的Loading，设置false可去掉
		  	});
		  	if (result.code == 200) {
		  		if (this.pageNum1 != 1) {
		  			this.OServicesList = this.OServicesList.concat(result.rows)
		  		} else {
		  			this.OServicesList = result.rows
		  		}
		  	}
		  },
		  
		  /**
		   * 跳转到商品详情
		   */
		  toProductDetails(item){
			  this.$u.route('/pages_private_scene2/SceneModule/ProductDetails?SceneAssetsId='+this.SceneAssetsId+'&SceneID='+item.SceneID+'&CommodityNo='+item.CommodityNo)
		  },
		  
		  /**
		   * 路由跳转
		   */
		  routePage(item) {
		  	this.$u.route(item.taskUrl)
		  },
		  
		  /** 
		   * 去后台
		   */
		  toInvitation() {
			  this.$u.route("/pages_private_scene1/NewSeaSpace/Invitation")
		  },
		  
		  /**
		   * 判断招聘是否在一周内（标签显示为新）
		   */
		  isNewOS(item) {
		  	let now = new Date()//获取当前时间戳
		  	let createTime = new Date(item.createTime.replace(/-/g,"/"))//距离的时间
		  	let index = (now - createTime)/1000/(60*60*24)
		  	let day = parseInt(index)//天
		  	if(day < 8){
		  		return true
		  	}
		  	return false
		  },
		  
		  /** 
		   * 输入验证码
		   * @param {Object} e
		   */
		  async finish(e) {
			  let result = await this.$u.api.unifyMiniRest({
			  	systemid: "meily",
			  	url: "/space/accept/verify",
			  	userId: uni.getStorageSync('userInfo').userId,
				nickName: uni.getStorageSync('userInfo').nickName,
				avatar: uni.getStorageSync('userInfo').avatarUrl,
			  	shareId: e,
			  	loading: true // 默认发起请求会有一个全局的Loading，设置false可去掉
			  });
			  if (result.code == 200) {
				this.verificationCode_show = false
				this.getNotices()
				this.getMarketingList()
				this.getOServicesList()
			  }else{
				  this.errorCodeTimes += 1
				  if(this.errorCodeTimes == 3){
					  this.$u.toast("邀请码错误已达3次！")
					  setTimeout(() => {
						uni.reLaunch({url: '/pages/index/index'})
					  }, 2000)
				  }else{
					  this.$u.toast("邀请码错误！")
				  }
			  }
		  },
		  
		  /**
		   * 验证当前用户是否为会员
		   */
		  async checkUser() {
		  	let result = await this.$u.api.unifyMiniRest({
		  		systemid: "meily",
		  		url: "/space/accept/checkUser",
				userId: uni.getStorageSync('userInfo').userId,
		  		loading: true // 默认发起请求会有一个全局的Loading，设置false可去掉
		  	});
		  	if (result.code == 200) {
		  		this.verificationCode_show = false
				this.getNotices()
				this.getMarketingList()
				this.getOServicesList()
		  	}else{
				this.verificationCode_show = true
			}
		  },
		  
		  toIndex(){
			  uni.reLaunch({url: '/pages/index/index'})
		  },
		  
		  /**
		   * 跳转到工作详情
		   */
		  toJobDetails(item) {
		  	this.$u.route('/pages_tabbar_contact/index_contact/jobDetails?jobId=' + item.jobId)
		  },
		  
	  },
    };
</script>

<style scoped>
	/* 尾部导航 */
	.holder{width: 100%;height: 1.65rem;}
	/* .foot-bar{width: 100%;position: fixed;bottom: 0;left: 0;z-index: 99;border-top: .01rem solid #535870;background: linear-gradient(to right,#2c324d,#3f4561);} */
	.foot-bar{width: 100%;position: fixed;bottom: 0;left: 0;z-index: 99;background: #FFFFFF;padding-bottom: 50rpx}
	.foot-bar ul{width: 100%;display: flex;justify-content: space-between;font-size: .2rem;color: #fff;letter-spacing: .03rem;}
	.foot-bar ul li{width: 100%;text-align: center;height: 4rem;display: flex;align-items: center;flex-direction: column;justify-content: center;}
	.foot-bar ul li i{flex-shrink: 0;display: inline-block;width: 100%;height: 2rem;margin-top: .08rem;}
	.foot-bar ul li span{padding-top: 0rem;font-size: .7rem;color: black;}
	.foot-bar ul li.middle{flex-shrink: 0;width: 3rem;height: 3rem;border-radius: 100%;background: linear-gradient(#fe5e81,#fe4475);margin-top: -1.2rem;display: flex;align-items: center;justify-content: center;}
	.foot-bar ul li.middle i{width: 1.5rem;height: 1.5rem;background: url(https://7072-prodcloud-0goj9rn820c29ef9-1305572243.tcb.qcloud.la/icon/SceneModule/tap-bar-middle.png?sign=c9c306222b055798da5d11ea88347f9f&t=1648032925) center center no-repeat;background-size:1.5rem auto;margin-top: 0;}
	.foot-bar ul li:nth-child(1) i{background: url(/static/icons/index.png) center center no-repeat;background-size:1.6rem auto;}
	.foot-bar ul li:nth-child(2) i{background: url(https://7072-prodcloud-0goj9rn820c29ef9-1305572243.tcb.qcloud.la/icon/Index/IMyMessageCenter4.png?sign=2e76a73f6c48d678711307d17db7dc8b&t=1648625557) center center no-repeat;background-size:1.3rem auto;}
	.foot-bar ul li:nth-child(4) i{background: url(https://7072-prodcloud-0goj9rn820c29ef9-1305572243.tcb.qcloud.la/icon/SceneModule/tap-bar-detail.png?sign=8485251f8c05a5a6b45f151cc455e813&t=1648032973) center center no-repeat;background-size:1.5rem auto;}
	.foot-bar ul li:nth-child(5) i{background: url(https://7072-prodcloud-0goj9rn820c29ef9-1305572243.tcb.qcloud.la/icon/SceneModule/tap-bar-more.png?sign=2aaafe82d012de453efe2edc9d99b1d3&t=1648032988) center center no-repeat;background-size:1.5rem auto;}
	.foot-bar ul li.active span{font-weight: bold;}
	/* 公告栏 */
	.news-content{margin: 20rpx;background-color: rgb(246,246,248);padding-bottom: 40rpx;padding-top: 1rpx;border-radius: 10rpx;}
	.news-content-lists {margin: 0 auto;padding-left: 30rpx;}
	.news-content-lists li {
		margin-top: 40rpx;
		/* float: left; */
		width: 100%;
		height: 14px;
		line-height: 14px;
	}
	.news-content-lists li a {display: flex;}
	.news-content-lists li a i {
		width: 5%;
		font-style: normal;
		font-size: 14px;
		/* color: #888; */
		white-space: nowrap;
	}
	.news-content-lists li a span {
		width: 90%;
		font-size: 14px;
		color: #555;
		white-space: nowrap;
		-o-text-overflow: ellipsis;
		text-overflow: ellipsis;
		overflow: hidden;
	}
	.news-content-lists li a:hover span {color: #0af}
	.clearfix::after {
		clear: both;
		content: ".";
		display: block;
		height: 0;
		visibility: hidden;
	}
	.clearfix {}
	.color-blue{color: #3B79FE;}
	/* .i-one{font-weight: bold;color: red;}
	.i-two{font-weight: bold;color: #ff9800;}
	.i-three{font-weight: bold;color: #ffc107;} */
	.foot-bar ul li:nth-child(3) i{background: url(/static/icons/personal.png) center center no-repeat;background-size:1.3rem auto;}
	
	/* 拍档 */
	.partner-box{
		width: 100%;
		padding-left: 5%;
		padding-right: 5%;
		position: relative;
		background-color: #ffffff;
	}
	
	/* 商品列表 */
	.aui-list-box {
		padding: 0.1rem 0 0 1rem;
		overflow: hidden;
		position: relative;
	}
	.aui-list-item {
		width: 45%;
		float: left;
		margin: 0 4% 2% 0;
		background: #fff;
		display: block;
		overflow: hidden;
		border-radius: 20rpx;
	}
	.aui-list-theme-img {
		height: auto;
		width: 100%;
		position: relative;
	}
	.aui-list-theme-img img {
		width: 100%;
		height: auto;
		display: block;
		border: none;
	}
	.aui-list-theme-message {
		background: #f9f5f5;
		padding: 0.3rem 0.2rem;
	}
	.aui-list-theme-title {
		color: #4a4a4a;
		font-size: 0.92rem;
		margin: 0.2rem 0;
		overflow: hidden;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		word-break: break-all;
		font-weight: normal;
		text-overflow: ellipsis;
	}
	.aui-list-theme-message p {
		color: #ff3b52;
		font-size: 0.88rem;
		font-weight:bold;
	}
	.aui-list-theme-message span.line-through {
		font-size: 0.7rem;
		color: #919191;
		padding: 0 0.2rem;
		text-decoration: line-through;
	}
	.aui-list-theme-message span.none-line-through {
		font-size: 0.7rem;
		color: #919191;
		padding: 0 0.2rem;
	}
	.aui-list-theme-message p i {
		font-style: normal;
		font-size: 0.7rem;
		padding: 0 0.2rem;
		color: #ff3b52;
		float: right;
		width: 25px;
		height: 25px;
	}
	.aui-list-theme-message p em {
		font-style: normal;
		font-size: 0.7rem;
		color: #ff3b52;
		text-decoration: line-through;
		font-weight:normal;
	}
	
	/* 两行或多行显示... */
	.line-ellipsis{
		height: 87.5rpx;
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		line-clamp: 2;				
		-webkit-box-orient: vertical;
	}
	
	/* 限制需求列表标题的长度 */
	.job-name {
	    width: 350rpx;
	    height: 50rpx;
	    text-overflow: -o-ellipsis-lastline;
	    overflow: hidden;
	    text-overflow: ellipsis;
	    display: -webkit-box;
	    -webkit-line-clamp: 1;
	    line-clamp: 1;
	    -webkit-box-orient: vertical;
	}
	  
	.job-price {
		font-size: 40rpx;
		color: #f02323;
		width: 232rpx;
		height: 50rpx;
		text-align: -webkit-right;
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: clip;
		// display: -webkit-box;
		-webkit-line-clamp: 1;
		line-clamp: 1;
	}
	
	.work-task-li {
		padding: 30rpx 20rpx;
	}
	
	.services-li {
		width: 95%;
		margin: 0 auto;
		background-color: #ffffff;
		padding: 30rpx 20rpx;
		margin-top: 20rpx;
		border-radius: 5rpx;
	}
	
	.os-job-name {
		font-size: 32rpx;
	}
	
	.os-salary {
		color: #ea4d5e;
		font-size: 32rpx;
	}
	
	.hot-tag {
		padding: 0rpx 5rpx;
		background-color: #ffa800;
		color: #ffffff;
		border-radius: 5rpx;
		font-size: 24rpx;
		margin-right: 10rpx;
	}
	
	.new-tag {
		padding: 0rpx 5rpx;
		background-color: #ea4d5e;
		color: #ffffff;
		border-radius: 5rpx;
		font-size: 24rpx;
		margin-right: 10rpx;
	}
	
	.workerReward-tag {
		font-size: 20rpx;
		border-radius: 5rpx;
		color: #ea4d5e;
		padding: 2rpx 4rpx;
		border: 1rpx solid #ea4d5e;
	}
	
	.sold-num {
		color: #b7b7b7;
		font-size: 24rpx;
	}
	
	.slot-content {
		font-size: 28rpx;
		color: #bcbcbc;
		text-align: center;
		margin: 0 auto;
		padding-top: 60rpx;
		padding-bottom: 80rpx;
	}

</style>
